<template>
  <div>
    <el-card body-style="padding:0;" style="margin-bottom: 20px;" class="panel-header">
      <div slot="header" style="display: flex; justify-content:space-between;">
        <span>
          <span class="back-button" @click="$router.go(-1)">
            <i class="el-icon-back" />
            <span>返回</span>
          </span>
          <span>用户管理</span>
        </span>
        <span>
          <el-button
            @click="handleAdd"
            size="mini"
            type="primary"
            style="float: right;margin:0 10px 0 0;"
          >添加用户</el-button>
        </span>
      </div>
    </el-card>

    <el-table
      :data="tableData"
      border
      style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);padding:auto;width:1030px;margin:auto"
      height="600"
    >
      <!-- <el-table-column prop="id" label="序号" width="50"></el-table-column> -->
      <el-table-column
        prop="register_date"
        label="注册日期"
        width="180"
        :formatter="formatTime"
        align="center"
      ></el-table-column>
      <el-table-column prop="username" label="用户名" width="120" align="center"></el-table-column>
      <el-table-column label="密码" width="100" align="center">********</el-table-column>
      <el-table-column prop="email" label="邮箱" width="180" align="center"></el-table-column>
      <el-table-column prop="is_supervisor" label="管理员权限" width="120" align="center"></el-table-column>
      <el-table-column
        prop="last_login_time"
        label="最后登录时间"
        width="180"
        :formatter="formatTime"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handleDel(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="用户编辑" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form" ref="pojoForm" :rules="rules">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="form.email" type="email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号类型" :label-width="formLabelWidth" prop="user_type">
          <el-select v-model="form.user_type" placeholder="请选择账号类型">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="普通用户" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="form.id == null ? addUser('pojoForm') : updateUser('pojoForm')"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, adduser, update, deleteById } from "@/api/user";
export default {
  data() {
    return {
      deleteON: null,
      addON: null,
      tableData: [],
      dialogFormVisible: false,
      form: {
        id: null,
        username: "",
        password: "",
        email: "",
        user_type: ""
      },
      formLabelWidth: "80px",
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    //打开新增窗口
    handleAdd() {
      this.dialogFormVisible = true;
      this.form = {};
      // this.$nextTick(() =>{
      // this.$refs.pojoForm.resetFields()//清空重置表单
      // })
    },
    formatTime(row, column) {
      var moment = require("moment");
      var date = row[column.property];
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    //修改
    updateUser(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          update(this.form).then(response => {
            const resp = response;
            if (resp.flag) {
              this.getUserList();
              this.dialogFormVisible = false;
              this.$message({
                message: resp.flag ? "修改成功" : "修改失败",
                type: resp.flag ? "success" : "error"
              });
            } else {
              this.$message({
                message: resp.message,
                type: "warning"
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    //新增用户
    addUser(formName) {
      // console.log(formName)
      this.$refs[formName].validate(valid => {
        if (valid) {
          // console.log(this.form);
          adduser(this.form).then(response => {
            const resp = response.data;
            this.addON = 1;
            if (this.addON) {
              this.getUserList();
              this.dialogFormVisible = false;
              this.$message({
                message: this.addON ? "新增成功" : "新增失败",
                type: this.addON ? "success" : "error"
              });
            } else {
              this.$message({
                message: "新增失败",
                type: resp.message
              });
            }
          });
        } else {
          //验证不通过
          return false;
        }
      });
    },
    handleClick(row) {
      this.handleAdd();
      this.form = row;
    },
    //删除用户
    handleDel(id) {
      console.log("删除", id);
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteById(id).then(response => {
          const resp = response.data;
          this.getUserList();
          this.deleteON = 1;
          this.$message({
            type: this.deleteON ? "success" : "error",
            message: this.deleteON ? "删除成功" : "删除失败"
          });
        });
      });
    },
    //获取用户列表
    getUserList() {
      getUserList().then(response => {
        this.tableData = response.data;
        console.log(this.tableData);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.back-button {
  display: inline-block;
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #909090;
  cursor: pointer;
  span {
    padding: 5px;
    font-size: 14px;
  }
}
</style>